<!--登陆验证码模块-->
<template>
	<div class="s-canvas">
		<canvas id="s-canvas"  :width="props.contentWidth" :height="props.contentHeight"></canvas>
	</div>
</template>
<script setup lang="ts">
 import {onMounted,watch} from "vue";
/*父子传参*/
 const props = defineProps({
	 identifyCode: {
		 type: String,
		 default: '1234'
	 },
	 fontSizeMin: {
		 type: Number,
		 default: 35
	 },
	 fontSizeMax: {
		 type: Number,
		 default: 35
	 },
	 backgroundColorMin: {
		 type: Number,
		 default: 180
	 },
	 backgroundColorMax: {
		 type: Number,
		 default: 240
	 },
	 colorMin: {
		 type: Number,
		 default: 50
	 },
	 colorMax: {
		 type: Number,
		 default: 160
	 },
	 lineColorMin: {
		 type: Number,
		 default: 100
	 },
	 lineColorMax: {
		 type: Number,
		 default: 200
	 },
	 dotColorMin: {
		 type: Number,
		 default: 0
	 },
	 dotColorMax: {
		 type: Number,
		 default: 255
	 },
	 contentWidth: {
		 type: Number,
		 default: 120
	 },
	 contentHeight: {
		 type: Number,
		 default: 40
	 }
 });

//生成一个随机数
const randomNum =(min:number,max:number):number =>{
	return Math.floor(Math.random() * (max - min) + min);
}
const randomColor=(min:number,max:number):string =>{

	let r = randomNum(min,max);
	let g = randomNum(min,max);
	let b = randomNum(min,max);
	return 'rbg('+r +','+g+','+b+')';
};

 // 绘制干扰线
 // const drawLine = (ctx:CanvasRenderingContext2D) => {
	//  for (let i = 0; i < 3; i++) {
	// 	 ctx.strokeStyle = randomColor(props.lineColorMin, props.lineColorMax)
	// 	 ctx.beginPath()
	// 	 ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight))
	// 	 ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight))
	// 	 ctx.stroke()
	//  }
 // }
 // const drawDot = (ctx:CanvasRenderingContext2D) => {
	//  // 绘制干扰点
	//  for (let i = 0; i < 30; i++) {
	// 	 ctx.fillStyle = randomColor(0, 255)
	// 	 ctx.beginPath()
	// 	 ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI)
	// 	 ctx.fill()
	//  }
 // }

 const drawText = (ctx:CanvasRenderingContext2D, txt:string, i:number) => {
	 ctx.fillStyle = randomColor(props.colorMin, props.colorMax)
	 ctx.font = randomNum(props.fontSizeMin, props.fontSizeMax) + 'px SimHei'
	 let x = (i + 1) * (props.contentWidth / (props.identifyCode.length + 1))
	 let y = randomNum(props.fontSizeMax, props.contentHeight - 5)
	 var deg = randomNum(-10, 10)
	 // 修改坐标原点和旋转角度
	 ctx.translate(x, y)
	 ctx.rotate(deg * Math.PI / 100)
	 ctx.fillText(txt, 0, 0)
	 // 恢复坐标原点和旋转角度
	 ctx.rotate(-deg * Math.PI / 100)
	 ctx.translate(-x, -y)
 }

//绘制验证码图形
 const  draw=() =>{
	 let canvas =  document.getElementById('s-canvas') as HTMLCanvasElement;
	 // canvas.height=canvas.height; //清除旧画布
	 let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
	 //清除旧画布
	 ctx.clearRect(0,0,canvas.width,canvas.height);
	 /*
	  * textBaseline 文字垂直对齐方式
    * top：上对其
    * middle：垂直居中对齐
    * bottom：下对齐
    * hanging：悬挂基线对齐
    * alphabetic：标准字母基线对齐，默认
    * ideographic：表意文字基线
	 */
	 ctx.textBaseline = 'bottom';
	 //背景
	 ctx.fillStyle =randomColor(props.backgroundColorMin,props.backgroundColorMax);
	 //文字
	 for (let idx =0;idx< props.identifyCode?.length;idx++){
			drawText(ctx,props.identifyCode[idx],idx);
	 }

	 //不要干扰
	  //drawLine(ctx);
	  //drawDot(ctx);
 }

 watch(() => props.identifyCode, (newValue, oldValue) => {
	draw();
 },{deep: true});
 onMounted(() =>{
	 draw();
 })

</script>

<style scoped lang="scss">
.s-canvas {
	cursor: pointer;
}
</style>